<template>
	<view class="content">
		<!-- 顶部搜索栏start -->
		<view class="fix_box">
		<view class="fix_tp">
			<navigator url="../mobile/qiandao" class="qiaodao" hover-class="none">
				<image src='../../static/qiandao.png' class="qiaodao_tpmg"></image>
			</navigator>
			<view class="search_box">
				<input type="search" placeholder="输入关键字进行搜索" class="search" adjust-position="false"/>
				<image src='../../static/search.png' class="sear_img"></image>
			</view>
			<navigator url="../member/cart" class="chart" hover-class="none">
				<image src='../../static/chart.png' class="sm_tpmg"></image>
			</navigator>
		</view>
		</view>
		<!-- 顶部搜索栏end -->
		<!-- 顶部轮播start -->
		<view class="banner">
       <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="rgb(255, 128, 192)" circular="true">
                        <swiper-item>
							<navigator url="../goods/detail" class="banner_a" hover-class="none">
                           <image src="http://wx.crh2009.com/attachment/images/2/2020/08/Ky3YA21Js2sDmS0wsTa2Rst2aSAYSi.jpg"></image>
						   </navigator>
                        </swiper-item>
                        <swiper-item>
							<navigator url="../goods/detail" class="banner_a" hover-class="none">
                             <image src="http://wx.crh2009.com/attachment/images/2/2020/08/p0Cav52Ie25Vakei2TiIUmzmtvNiAD.jpg"></image>
							 </navigator>
                        </swiper-item>
                        <swiper-item>
							<navigator url="../goods/detail" class="banner_a" hover-class="none">
                           <image src="http://wx.crh2009.com/attachment/images/2/2020/08/MM8k8S2wfFWW8w2pS0kisSWKFxkzk8.jpg"></image>
						   </navigator>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
		</view>
		<!-- 顶部轮播end -->
		<!-- 分类列表start -->
		<view class="tui_ul">
			<view class="tui_li" v-for="(item,index) in item">
				<navigator hover-class="none" :url="item.url" class="tui_li_a">
					<image :src="item.img" class="tui_img"></image>
					<view class="tui_li_text">{{item.text}}</view>
				</navigator>
			</view>
		</view>
		<!-- 分类列表end -->
		<!-- 0圆抢购 start-->
		<navigator url="" hover-class="none" class="listp">
			<image src="../../static/label1.gif" class="listp_img"></image>
		</navigator>
		<view class="lisbt">
			<navigator hover-class="none" url="" class="lis_btsm">
				<image src="../../static/lis1.gif" class="lis_img"></image>
			</navigator>
			<navigator hover-class="none" url="" class="lis_btsm">
				<image src="../../static/lis2.gif" class="lis_img"></image>
			</navigator>
			<navigator hover-class="none" url="" class="lis_btsm">
				<image src="../../static/lis3.gif" class="lis_img"></image>
			</navigator>
		</view>
	<!--0 圆抢购end -->
	<!-- 热卖推荐start -->
			<image src="../../static/label2.png" class="remai"></image>
		<!-- 上面的推荐 -->
			<view class="re_ul">
				
				<view class="re_li">
					<navigator url="" hover-class="none" class="re_a">
						<image src="../../static/re1.png"></image>
					</navigator>
				</view>
				<view class="re_li">
					<navigator url="" hover-class="none" class="re_a">
						<image src="../../static/re2.png"></image>
					</navigator>
				</view>
				<view class="re_li">
					<navigator url="" hover-class="none" class="re_a">
						<image src="../../static/re3.png"></image>
					</navigator>
				</view>
				<view class="re_li">
					<navigator url="" hover-class="none" class="re_a">
						<image src="../../static/re4.png"></image>
					</navigator>
				</view>
			</view>
				<!-- 下面的推荐 -->
				<view class="re_btul">
					<view class="re_bt_left">
						<navigator url="" hover-class="none" class="re_bt_a">
						<image src="../../static/re5.gif"></image>
						</navigator>
					</view>
					<view class="re_bt_right">
						<view class="re_bt_right_tp">
							<navigator url="" hover-class="none" class="re_bt_a">
								<image src="../../static/re6.png"></image>
								</navigator>
						</view>
						<view class="re_bt_right_bt">
							<navigator url="" hover-class="none" class="re_bt_a_bt">
								<image src="../../static/re7.png"></image>
								</navigator>
								<navigator url="" hover-class="none" class="re_bt_a_bt">
								<image src="../../static/re8.png"></image>
								</navigator>
						</view>
					</view>
				</view>
	<!-- 热卖推荐end -->
<!-- 商品列表组件 start-->
<view class="goods_box" style="margin-top:10rpx;">
	<view class="lei_ul">
		<view :class="[ lei_li_active == index ? 'lei_li_active lei_li' : 'lei_li']" v-for="(text,index) in lei" :key="index" @tap="changelei(index)">
			{{text.text}}
		</view>
	</view>
<goodslist ></goodslist>
</view>
<!-- 商品列表组件 end-->
<navigator hover-class="none" url="" class="dan_mei">
<image src="../../static/dan.png"></image>	
</navigator>
	<!-- 原diy板块，七夕等推荐商品start -->
	<view>
	<navigator url="" hover-class="none" class="diy_qi">
		<image src="../../static/diy1.png" class="diygoods"></image>
	</navigator>
	<view class="diy_ul">
		<navigator hover-class="none" url="" class="diy_li">
			<image src="../../static/diy2.png" class="diygoods_sm"></image>
		</navigator>
		<navigator hover-class="none" url="" class="diy_li">
			<image src="../../static/diy3.png" class="diygoods_sm"></image>
		</navigator>
		<navigator hover-class="none" url="" class="diy_li">
			<image src="../../static/diy4.png" class="diygoods_sm"></image>
		</navigator>
	</view>
	</view>
	
	<view>
	<navigator url="" hover-class="none" class="diy_qi">
		<image src="../../static/diy5.png" class="diygoods"></image>
	</navigator>
	<view class="diy_ul">
		<navigator hover-class="none" url="" class="diy_li">
			<image src="../../static/diy6.png" class="diygoods_sm"></image>
		</navigator>
		<navigator hover-class="none" url="" class="diy_li">
			<image src="../../static/diy7.png" class="diygoods_sm"></image>
		</navigator>
		<navigator hover-class="none" url="" class="diy_li">
			<image src="../../static/diy8.png" class="diygoods_sm"></image>
		</navigator>
	</view>
	</view>
	
	
	<view>
	<navigator url="" hover-class="none" class="diy_qi">
		<image src="../../static/diy9.png" class="diygoods"></image>
	</navigator>
	<view class="diy_ul">
		<navigator hover-class="none" url="" class="diy_li">
			<image src="../../static/diy10.png" class="diygoods_sm"></image>
		</navigator>
		<navigator hover-class="none" url="" class="diy_li">
			<image src="../../static/diy11.png" class="diygoods_sm"></image>
		</navigator>
		<navigator hover-class="none" url="" class="diy_li">
			<image src="../../static/diy12.png" class="diygoods_sm"></image>
		</navigator>
	</view>
	</view>

	<!-- 原diy板块，七夕等推荐商品end -->
	
	<!-- 中部轮播start -->
			<view class="banner">
	<view class="uni-padding-wrap">
	     <view class="page-section swiper">
	         <view class="page-section-spacing">
	             <swiper class="swiper" autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="rgb(255, 128, 192)" circular="true">
	                 <swiper-item>
								<navigator url=" " class="banner_a" hover-class="none">
	                    <image src="http://wx.crh2009.com/attachment/images/2/2020/08/fE839iuB2J3fBK0LUjl9LIStSLTQEF.jpg"></image>
							   </navigator>
	                 </swiper-item>
	                 <swiper-item>
								<navigator url="" class="banner_a" hover-class="none">
	                      <image src="http://wx.crh2009.com/attachment/images/2/2020/08/UD1Fi9Ai8at9AR9gAiFF8trDFri7Ra.jpg"></image>
								 </navigator>
	                 </swiper-item>
	                 <swiper-item>
								<navigator url="" class="banner_a" hover-class="none">
	                    <image src="http://wx.crh2009.com/attachment/images/2/2020/08/y0q0Z0Toro9UfHozT8Q492R240o902.jpg"></image>
							   </navigator>
	                 </swiper-item>
	             </swiper>
	         </view>
	     </view>
	 </view>
			</view>
			<!-- 中部轮播end -->
			
			<!-- 网红爆款start -->
			<image src="../../static/wanghong.png" class="remai" ></image>
			<view class="goods_box">
				<!-- 商品子组件 start -->
			<goodslist ></goodslist> 
			<!-- 商品子组件 end -->
			</view>
			
	<!-- 侧边栏 -->
	<fixce></fixce> 
	<!-- 回到顶部start -->
	<view class="top" :style="{'display':(topState===true? 'block':'none')}">
	<image src="../../static/huitop.png" class="huitop"
	@tap="top()">
	</image>
	</view>
		<!-- 回到顶部end-->
	</view>
</template>

<script>
	import goodslist from '../../component/goodslist.vue';  //商品列表
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default {
	components:{
	goodslist,
	fixce
	},
		data() {
			return {
			 topState:false,
			 lei_li_active:0,//商品分类列表默认第一个
			 lei:[   //商品分类列表
			 				   {
			 					   text:'精选推荐'
			 					   },
			 				   { text:'应季水果'},
			 				     { text:'夏季推荐'},
			 					   { text:'吃货推荐'},
			 					     { text:'家居神器'},
			 						   { text:'美容精品'}
			 ],
				item:[
					{
						img:'../../static/t1.png',
						text:'潮人美妆',
						url:" "
					},
					{
						img:'../../static/t2.png',
						text:'潮人精品',
						url:" "
					},
					{
						img:'../../static/t3.png',
						text:'日用百货',
						url:" "
					},
					{
						img:'../../static/t4.png',
						text:'洗护用品',
						url:" "
					},
					{
						img:'../../static/t5.png',
						text:'时尚穿搭',
						url:" "
					},
					{
						img:'../../static/t6.gif',
						text:'早鸟福利',
						url:" "
					},
					{
						img:'../../static/t7.png',
						text:'应季水果',
						url:" "
					},
					{
						img:'../../static/t8.png',
						text:'网红零食',
						url:" "
					},
					{
						img:'../../static/t9.png',
						text:'肉食生鲜',
						url:" "
					},
					{
						img:'../../static/t10.png',
						text:'母婴儿童',
						url:" "
					}
				]
			}
		},
		onLoad() {

		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods: {
			changelei (index){  //点击切换分类商品
			console.log(index);
				this.lei_li_active=index;
			},
			top() { //回到顶部
	　　　　uni.pageScrollTo({ 
	　　　　　　scrollTop: 0, duration: 300 
	　　　　}); 
	　　}
		}
	}
</script>

<style>
	
@import url("../../static/css/good.css");
	.content {
width:100%;
overflow-x: hidden;
	}
	/* 首页banner */
.banner uni-swiper{
	    height: 400rpx;
}
.banner_a{
	width: 100%;
	height: 100%;
}
.banner uni-image{
	    width: 100%;
	    height: 100%;
}
.banner uni-swiper .uni-swiper-dots-horizontal{
	    left: 8%;
		bottom: 10rpx;
}
 .uni-swiper-dots-horizontal{
	width:25rpx!important;
	height:25rpx!important;
}

/* 首页顶部搜索栏 */
.fix_box{
	width:100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: fixed;
	top:0;
	z-index:9999;
	    background: rgba(244, 244, 244, 0.6);
	 padding:20rpx 0;
}
.fix_tp{
		width: 95%;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
}
.sm_tpmg{
	width:45rpx;
	height:45rpx;	
}
.qiaodao,.chart{
	width:13%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.qiaodao_tpmg{
	width:55rpx;
	height:55rpx;
}
.search_box{
	width:80%;
	height:65rpx;
	background-color: #fff;
	border-radius: 10rpx;
	position: relative;
}
.search{
	width:85%;
	height:100%;
	text-indent: 10rpx;
	font-size:26rpx;
}
.sear_img{
	width:38rpx;
	height:38rpx;
	position: absolute;
	right:20rpx;
	top:10rpx;
}


.tui_ul{
	width:100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap:wrap;
	align-items: center;
	margin-top:13rpx;
}
.tui_li{
	width:20%;
	padding:5px 0;
	text-align: center;
}
.tui_img{
	width:90rpx;
	height:90rpx;
	border-radius:100rpx;
}
.tui_li_text{
	width:100%;
	color: #393939;
	font-size:24rpx;
}
.listp{
	display: block;
	width:100%;
	margin-top:20rpx;
}
.listp_img{
		width:100%;
		height:160rpx;
}
.lisbt{
	width:100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top:-10rpx;
}
.lis_btsm{
	flex:1;
	height:200rpx;
}
.lis_img{
	width:100%;
	height:100%;
}
.remai{
	width:100%;
	height:80rpx;
}
.re_ul{
	width:100%;
	border:2rpx solid #e8e8e8;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.re_li{
		width:24.5%;
		height:200rpx;
		border-left:2rpx solid #e8e8e8;
}
.re_li:nth-child(1){
	border:none;
}
.re_a{
	width:100%;
	height:100%;
}
.re_a image{
	width:100%;
	height:100%;
}
.re_btul{
	width:100%;
	height:340rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
    border-bottom:2rpx solid #e8e8e8;
}
.re_bt_left{
	width:50.8%;
	height:100%;
	border-right:2rpx solid #e8e8e8;
}
.re_bt_a{
	width:100%;
	height:100%;
}
.re_bt_left image{
	width:100%;
	height:100%;
}
.re_bt_right{
	width:50%;
	height:100%;
}
.re_bt_right_tp{
	width:100%;
	height:50%;
	border-bottom:2rpx solid #e8e8e8;
}
.re_bt_right_tp image{
	width:100%;
	height:100%;
}
.re_bt_right_bt{
	width:100%;
	height:48%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.re_bt_a_bt{
	width:50%;
	height:100%;
}
.re_bt_right_bt image{
	width:98%;
	height:100%;
}
.re_bt_right_bt image:nth-child(1){
	border-right:2rpx solid #e8e8e8;
}
.dan_mei{
	width:100%;
	margin:15rpx 0;
}
.dan_mei image{
	width:100%;
	height:100rpx;
}

.diy_qi{
	width:100%;
	margin-top:-10rpx;
}
.diygoods{
	width:100%;
	height:380rpx;
}
.diy_ul{
	width:100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.diy_li{
	width:33.3%;
	margin-top:-10rpx;
}
.diygoods_sm{
	width:100%;
	height:300rpx;
}
</style>
